<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="m-all">
<head th:replace="common::head('标签管理')">

</head>

<body class="m-all">
<div id="app">
    <el-container style="height: 100%; border: 1px solid #eee">

        <el-container>

            <el-main  v-loading="loading">
                <div>
                    <el-input v-model="vo.name" placeholder="机构名称" style="width: 140px;"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="getData(1)">查询</el-button>
                    <el-button type="primary" @click="tongbu">补充本地缺失的关联关系</el-button>
                    <span style="float: right; cursor: pointer" @click="quan">{{btn_q}}</span>
                </div>
                <div style="margin-top: 5px">
                    <el-table ref="multipleTable"
                              :data="tableData"
                              max-height="650"
                              border
                              tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="企业微信机构id" width="140" fixed>
                        </el-table-column>
                        <el-table-column prop="parentId" label="企业微信机构上级id" width="150">
                        </el-table-column>
                        <el-table-column prop="name" label="机构名称" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="orgId" label="关联机构id">
                        </el-table-column>
                        <el-table-column prop="code" label="关联机构编码">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="updateRow(scope.$index, tableData)"
                                        type="text"
                                        size="small">
                                    关联
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 50, 100, 66666]"
                                :page-size="10"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>

            </el-main>
        </el-container>
    </el-container>
    <tankuang :src="src" :m_flag.sync="m_flag" :closeWin="closeWin"></tankuang>
</div>

</body>
<style>
    .mask {
        background-color: rgb(0, 0, 0);
        opacity: 0.3;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>

<script>
    Vue.component('tankuang', {
        props: {
            closeWin : {
                type : Function,
                default: null
            },
            src:{
                type : String,
                default: ''
            },
            m_flag:{
                type : Boolean,
                default: false
            }
        },

        methods:{
            closeCurrWin(){
                this.closeWin();
            }
        },
        created:function () {
            //组件被创建的时候调用
            //如果该组件通过json引入的，那么可以在父页面将数据放到cookie里面，然后在这里获取
            //例如  getcookie(id)
            //然后就可以使用这个id  初始化data啦
        },
        //template:html 可通过json获取已经定义好的界面 如果有脚手架就更好办啦，直接import然后然道component里面就可以使用啦
        template:'<div>' +
            '        <el-dialog' +
            '                title="确认关联关系"' +
            '                :visible.sync="m_flag"' +
            '                width="80%"' +
            '                height="60%"' +
            '                >' +
            '            <iframe :src="src" frameborder="0" width="100%" height="100%" style="min-height: 400px; min-width: 600px; border-width: 0px; top: 0; left: 0; background-color: white; z-index: 99999"></iframe>' +
            '            <span slot="footer" class="dialog-footer">' +
            '                <el-button @click="closeCurrWin">取 消</el-button>' +
            '                <el-button type="primary" @click="closeCurrWin">确 定</el-button>' +
            '            </span>' +
            '        </el-dialog>' +
            '    </div>'//这里我就做一个简单的演示  我真正使用的时候是使用上面那种json获取的组件内容或者import引入
    });
    new Vue({
        el: '#app',
        data() {
            return {
                btn_q : '全屏',
                vo:{
                    name:''
                },
                tableData : [{code:1}],
                isCollapse : false,
                loading : false,
                currentPage : 1,
                p : 1,
                s : 10,
                total : 0,
                src : '',
                m_flag : false

            }
        },
        methods: {
            closeWin(){
                this.m_flag = false;
            },
            quan(){
                var iframe = window.frameElement;
                if(this.btn_q == '全屏'){
                    this.btn_q = '退出全屏';
                    iframe.style.position = 'fixed';
                }else {
                    this.btn_q = '全屏';
                    iframe.style.position = '';
                }
console.log(this.m_flag)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.s = val;
                this.getData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.p = val;
                this.getData();
            },
            getData (p) {
                if(!!p){
                    this.p = p;
                }

                this.loading = true;
                axios.post('/qyWeixin/org/getLocalNoOrgList', 'current=' + this.p + '&size=' + this.s + '&name=' + this.vo.name).then(res => {
                    const data = res.data;
                    if(data.code == '0'){
                        this.tableData = data.data;
                        this.total = data.count;
                        this.$message.success(data.msg);
                    }else{
                        this.$message.error(data.msg)
                    }
                    this.loading = false;
                    this.m_flag = false;
                })
            },
            tongbu () {

                this.loading = true;
                axios.post('/qyWeixin/org/synceOrgIds').then(res => {
                    const data = res.data;
                    if(data.code == '200'){
                        this.$message.success(data.msg);
                        this.getData(1)
                    }else{
                        this.$message.error(data.msg)
                    }
                    this.loading = false;
                    this.m_flag = false;
                })
            },
            collapse () {
                this.isCollapse = !this.isCollapse
            },
            updateRow(index, rows){
                this.loading = true;
                this.src = '/qyWeixin/org/relationConfirm?name='+rows[index].name + '&id=' + rows[index].id;
                this.m_flag = true;
                this.loading = false;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            }
        },
        created () {
            this.getData()
        }
    })
</script>
</html>